<style lang="less">
    @import './login.less';
</style>
<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录-阳和通携客云打标系统
                </p>
                <div class="form-con">
                    <el-form ref="loginForm" :model="form" :rules="rules">
                        <el-form-item prop="userName">
                            <el-input size="small" v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="md-person"></Icon>
                                </span>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input size="small" type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="md-lock"></Icon>
                                </span>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width:100%" size="small" @click="handleSubmit" :loading="loading" type="primary" block>登录</el-button>
                        </el-form-item>
                    </el-form>
                    <p class="login-tip">输入任意用户名和密码即可</p>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import api from '@/api/api'
export default {
    name: 'Login',
    data() {
        return {

            loading: false,

            form: {
                userName: '',
                password: '',
                code: '123456'
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    beforeRouteLeave(to, from, next) {


        next();
    },
    mounted: function() {
        var li = sessionStorage.getItem("isWeixin");
        
       
        if (li == 'true' || li == true) { //如果微信浏览器
            var code = this.$route.query.token;
            if (code != null && code != undefined) {
                //去登陆获取信息
                this.code = code;
                this.getMyLoginState();

            } else { //跳转到授权链接code=rfG0U2OBP8h4msQZinf3B6XifQ3LJHUOYi2kbiB_pJ4&state=1
                this.getAuthUrl();
            }
        }
    },
    watch: {

    },
    methods: {
        getMyLoginState: function() {
            var me = this;
            me.showLoading();
            me.$http.post("/wx/getSysInfo.do", { token: me.code }).then(response => {
                var body = response;
                if (body.status == 0) {
                    this.$store
                        .dispatch("qrLogin", body.obj)
                        .then((res) => {
                           me.loading = false;


                            if (res.status == 0) {
                                me.$store.commit('updateMenulist');
                                me.toLogin();
                            } else {
                                me.errorMessage(res.info);
                            }
                        });
                } else {
                    me.errorMessage(body.info);
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        getAuthUrl: function() {
            var me = this;
            me.showLoading();
            me.$http.post("/wx/wxsyslogin.do").then(response => {
                var body = response;
                if (body.status == 0) {
                    window.location.href = body.obj;
                } else {
                    me.errorMessage(body.info);
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        toLogin() {
            var me = this;

            let fullpath = sessionStorage.getItem("relUrl");
            if (fullpath != null && fullpath != undefined) {
                sessionStorage.setItem("relUrl", null);
                me.$router.push(fullpath);

            } else {
                if (sessionStorage.getItem("phone") == "true" ||
                    sessionStorage.getItem("phone") == true) {
                    me.$router.push("/mb/index");
                } else {
                   
                    me.$router.push("/index");
                }
            }
        },
        handleSubmit: function() {
            //console.log(process.env.VUE_APP_APPKEY);
            var me = this;
            me.$refs.loginForm.validate((valid) => {
                if (valid) {
                    me.loading = true;
                    me.$store
                        .dispatch("userLogin", me.form)
                        .then(res => {
                            // 权限菜单过滤相关
                            me.loading = false;


                            if (res.status == 0) {
                                me.$store.commit('updateMenulist');
                                me.toLogin();
                            } else {
                                me.errorMessage(res.info);
                            }
                        }).catch(error => {

                            me.restInfo();
                            me.errorMessage("登录异常" + error);
                            me.loading = false;
                        });
                }
            });


        },
        restInfo: function() {
            this.form.userName = "";
            this.form.password = "";
        }
    },
    computed: {


    },
    components: {

    }
}
</script>
<style scoped>
.login .login-con {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 300px;

}
</style>